<template>
<div id="ZS_Shops" class="page-blank">
  <van-nav-bar title="增长趋势"/>
  <van-search v-model="date" placeholder="请输入" @click="showBlank" input-align="right" :clearable="false" readonly> 
    <div slot="label" @click.stop="showAction = true">
      {{ labelName }}
      <van-icon name="arrow-down" />
    </div>       
  </van-search>
  <div style="height: 8rem;" id="echarts"></div>

  <van-action-sheet v-model="showAction" :actions="actions" @select="selectAction" cancel-text="取消"
   @cancel="showAction = false"/>
  <van-popup v-model="riqi.show" position="bottom" v-if="riqi.show">
    <van-datetime-picker v-model="riqi.value" :type="dateType" :formatter="formatter" @cancel="riqi.show = false" @confirm="changeDate"/>
  </van-popup>
</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import axios from '@/utils/request';
import { formatDate } from '@/utils/common';
declare let echarts: any

@Component
export default class ZS_Shops extends Vue {

  goBack() {
    this.$router.go(-1);
  }

  content: any = ''

  labelName: any = '按日统计'
  showAction:any = false
  actions: any = [
    { name: '按日统计' },
    { name: '按月统计' },
    { name: '按年统计' }
  ]
  selectAction(obj: any) {
    this.labelName = obj.name;
    this.getInfo();
    this.showAction = false;
  }
  
  datevalue: any = new Date()
  riqi: any = {
    value: new Date(),
    show: false
  }
  get date() {
    if ( this.labelName == '按日统计' ) {
      return formatDate(this.datevalue, 'yyyy-MM-dd');
    } else if ( this.labelName == '按月统计' ) {
      return formatDate(this.datevalue, 'yyyy-MM');
    } else {
      return formatDate(this.datevalue, 'yyyy');
    }
  }
  get dateType() {
    if ( this.labelName == '按日统计' ) {
      return 'date';
    } else if ( this.labelName == '按月统计' ) {
      return 'year-month';
    } else {
      return 'year-month';
    }
  }
  showBlank() {
    this.riqi.value = new Date( this.datevalue );
    this.riqi.show = true;
  }
  formatter(type: string, value: any) {
    let nameJson: any = { year: '年', month: '月', day: '日' };
    return value + nameJson[ type ];
  }
  changeDate(date: any) {
    this.datevalue = new Date(date);
    this.riqi.show = false;
    this.getInfo();
  }

  chartObj: any = null;
  getInfo() {
    let typeJson: any = { '按日统计': 1, '按月统计': 2, '按年统计': 3 };
    let type = typeJson[ this.labelName ];
    axios.get('/api/statistic/all', { type, search: this.date }).then((res: any) => {
      if ( this.labelName == '按日统计' ) {
        this.drawDay(res);
      } else if ( this.labelName == '按月统计' ) {
        this.drawMonth(res);
      } else {
        this.drawYear(res);
      }
    })
  }
  drawDay(list: any) {
    let xAxisData: any = [];
    let allmoney: any = [];
    let wxmoney: any = [];
    let zfbmoney: any = [];
    let allcount: any = [];
    let wxcount: any = [];
    let zfbcount: any = [];
    list.forEach((ele: any) => {
      xAxisData.push( ele.unit.split(' ')[1] );

      allmoney.push( ele.total_money );
      wxmoney.push( ele.wx_money );
      zfbmoney.push( ele.zfb_money );

      allcount.push( ele.total_num );
      wxcount.push( ele.wx_num );
      zfbcount.push( ele.zfb_num );
    });
    this.drawChart({ xAxisData, allmoney, wxmoney, zfbmoney, allcount, wxcount, zfbcount });
  }
  drawMonth(list: any) {
    let xAxisData: any = [];
    let allmoney: any = [];
    let wxmoney: any = [];
    let zfbmoney: any = [];
    let allcount: any = [];
    let wxcount: any = [];
    let zfbcount: any = [];
    list.forEach((ele: any) => {
      xAxisData.push( ele.unit.split('-')[2] );

      allmoney.push( ele.total_money );
      wxmoney.push( ele.wx_money );
      zfbmoney.push( ele.zfb_money );

      allcount.push( ele.total_num );
      wxcount.push( ele.wx_num );
      zfbcount.push( ele.zfb_num );
    });
    this.drawChart({ xAxisData, allmoney, wxmoney, zfbmoney, allcount, wxcount, zfbcount });
  }
  drawYear(list: any) {
    let xAxisData: any = [];
    let allmoney: any = [];
    let wxmoney: any = [];
    let zfbmoney: any = [];
    let allcount: any = [];
    let wxcount: any = [];
    let zfbcount: any = [];
    list.forEach((ele: any) => {
      xAxisData.push( ele.unit.split('-')[1] );

      allmoney.push( ele.total_money );
      wxmoney.push( ele.wx_money );
      zfbmoney.push( ele.zfb_money );

      allcount.push( ele.total_num );
      wxcount.push( ele.wx_num );
      zfbcount.push( ele.zfb_num );
    });
    this.drawChart({ xAxisData, allmoney, wxmoney, zfbmoney, allcount, wxcount, zfbcount });
  }


  drawChart(json: any) {
    let xAxisData = json.xAxisData;
    let allmoney = json.allmoney;
    let wxmoney = json.wxmoney;
    let zfbmoney = json.zfbmoney;
    let allcount = json.allcount;
    let wxcount = json.wxcount;
    let zfbcount = json.zfbcount;
    let option: any = {
      backgroundColor:'#232d36',
      tooltip: {
        trigger: 'axis',
      },
      grid: {
        top: '15%',
        left: '15%',
        right: '5%',
        bottom: '15%',
      },
      xAxis: [
        {
          type: 'category',
          axisLine: { show: false, color:'#A582EA' },
          axisLabel: { color: '#A582EA' },
          splitLine: { show: false },
          boundaryGap: false,
          data: xAxisData
        }
      ],
      color: [ '#A582EA', '#2CABE3', '#3366FF', '#6633FF', '#CC33FF', '#FF33CC' ],
      yAxis: [
        {
          type: 'value',
          min: 0,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: { color: '#00BFF3', opacity: 0.23 }
          },
          axisLine: { show: false },
          axisLabel: { show: true, margin: 20, textStyle: { color: '#fff' } },
          axisTick: { show: false }
        }
      ],
      series: [
        {
          name:'总流水',
          type: 'line',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: { normal: { color: "#A582EA" } },
          itemStyle: { color: "#fff", borderColor: "#A582EA", borderWidth: 2 },
          data: allmoney
        },
        {
          name:'微信流水',
          type: 'line',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: { normal: { color: "#2CABE3" } },
          itemStyle: { color: "#fff", borderColor: "#2CABE3", borderWidth: 2 },
          data: wxmoney
        },
        {
          name:'支付宝流水',
          type: 'line',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: { normal: { color: "#3366FF" } },
          itemStyle: { color: "#fff", borderColor: "#3366FF", borderWidth: 2 },
          data: zfbmoney
        },
        {
          name:'总订单',
          type: 'line',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: { normal: { color: "#6633FF" } },
          itemStyle: { color: "#fff", borderColor: "#6633FF", borderWidth: 2 },
          data: allcount
        },
        {
          name:'微信订单',
          type: 'line',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: { normal: { color: "#CC33FF" } },
          itemStyle: { color: "#fff", borderColor: "#CC33FF", borderWidth: 2 },
          data: wxcount
        },
        {
          name:'支付宝订单',
          type: 'line',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: { normal: { color: "#FF33CC" } },
          itemStyle: { color: "#fff", borderColor: "#FF33CC", borderWidth: 2 },
          data: zfbcount
        },
      ]
    };
    this.chartObj.setOption( option );
  }

  mounted() {
    this.$nextTick(() => {
      this.chartObj = echarts.init( document.getElementById('echarts') );
      this.getInfo();
    });
  }
  
};
</script>

<style lang="scss">
#ZS_Shops {
}
</style>

